import ProCard, { StatisticCard } from '@ant-design/pro-card';
import EnterpriseBar from './Bar';
import EnterprisePie from './Pie';
import DemoPie from './Circle';
import DemoCirclePacking from './CirclePack';
import '../index.less';

const imgStyle = {
  display: 'block',
  width: 45,
  height: 45,
  marginTop: 5,
};

const data = [
  {
    type: '房地产',
    sales: 145,
  },
  {
    type: '制造业',
    sales: 52,
  },
  {
    type: '金融业',
    sales: 110,
  },
  {
    type: '服务业',
    sales: 95,
  },
  {
    type: '农业',
    sales: 30,
  },
  {
    type: 'IT行业',
    sales: 90,
  },
];

const statistic1 = [
  {
    title: '存储格式',
    image: '/icons/storage.svg',
    value: 'XX',
  },
  {
    title: '数据规模',
    image: '/icons/data.svg',
    value: '33,333',
  },
  {
    title: '实体数量',
    image: '/icons/entity.svg',
    value: '128,128',
  },
  {
    title: '关系数量',
    image: '/icons/relation.svg',
    value: '128,128',
  },
];

const statistic2 = [
  {
    title: '参与高校',
    image: '/icons/house.svg',
    value: '10',
  },
  {
    title: '应用企业',
    image: '/icons/building.svg',
    value: '100',
  },
];
const OriginHeader = () => {
  return (
    <ProCard
      gutter={20}
      ghost
      style={{
        background: '#FCFCFC',
        padding: '20px',
        borderRadius: '16px',
        marginTop: '-30px',
      }}
    >
      <ProCard
        colSpan={5}
        direction="column"
        gutter={5}
        ghost
        style={{
          marginTop: '25px',
          filter: 'drop-shadow(0px 100px 80px rgba(114, 46, 209, 0.07))',
        }}
      >
        <ProCard
          style={{
            color: 'white',
            backgroundColor: '#722ED1',
            borderRadius: '15px',
            width: '100%',
            marginBottom: '25px',
          }}
        >
          <p style={{ fontSize: '18px', marginBottom: 0 }}>数据总量</p>
          <p style={{ fontSize: '45px', marginBottom: 0, fontWeight: 'bold' }}>114,514</p>
        </ProCard>
        <ProCard
          direction={'column'}
          style={{
            borderRadius: '15px',
            marginBottom: '25px',
            filter: 'drop-shadow(0px 100px 80px rgba(114, 46, 209, 0.07))',
          }}
        >
          {statistic1.map(({ title, value, image }) => (
            <StatisticCard
              statistic={{
                title,
                value,
                valueStyle: {
                  fontWeight: 'bold',
                  marginTop: '-5px',
                },
                icon: <img style={imgStyle} src={image} alt="icon" />,
              }}
              style={{ width: '100%', marginBottom: '10px' }}
              bodyStyle={{ padding: 0 }}
              key={title}
            />
          ))}
        </ProCard>
        <ProCard direction={'column'} style={{ borderRadius: '15px' }}>
          {statistic2.map(({ title, value, image }) => (
            <StatisticCard
              statistic={{
                title,
                value,
                valueStyle: {
                  fontWeight: 'bold',
                  marginTop: '-5px',
                },
                icon: <img style={imgStyle} src={image} alt="icon" />,
              }}
              style={{ width: '100%', marginBottom: '10px' }}
              bodyStyle={{ padding: 0 }}
              key={title}
            />
          ))}
        </ProCard>
      </ProCard>
      <ProCard
        colSpan={14}
        ghost
        style={{ backgroundColor: '#EEF1FA', marginTop: '-20px', borderRadius: '15px' }}
        layout="center"
        direction="column"
      >
        <img src="/zhirong.png" style={{ margin: '50px 0 ' }}></img>
        <DemoCirclePacking
          data={{
            name: 'root',
            children: data.map((e) => {
              return { name: e.type, value: e.sales };
            }),
          }}
        ></DemoCirclePacking>
      </ProCard>
      <ProCard
        colSpan={5}
        direction={'column'}
        style={{ borderRadius: '15px', marginTop: '15px', marginBottom: '25px' }}
        ghost
      >
        <ProCard
          style={{
            width: '100%',
            color: 'white',
            backgroundColor: '#722ED1',
            borderRadius: '15px',
            marginBottom: '20px',
            marginTop: '10px',
          }}
        >
          <p style={{ fontSize: '18px', marginBottom: 0 }}>覆盖企业</p>
          <p style={{ fontSize: '45px', marginBottom: 0, fontWeight: 'bold' }}>10,000</p>
        </ProCard>
        <ProCard
          style={{
            width: '100%',
            height: '160px',
            borderRadius: '15px',
            marginBottom: '20px',
            filter: 'drop-shadow(0px 100px 80px rgba(114, 46, 209, 0.07))',
          }}
          bodyStyle={{ padding: 10 }}
        >
          <p style={{ marginTop: 0, fontsize: '14px', marginBottom: 5 }}> 舆情数据关键词情况</p>
          <EnterpriseBar data={data}></EnterpriseBar>
        </ProCard>
        <ProCard
          style={{
            width: '100%',
            height: '180px',
            borderRadius: '15px',
            marginBottom: '20px',
            filter: 'drop-shadow(0px 100px 80px rgba(114, 46, 209, 0.07))',
          }}
          bodyStyle={{ padding: 10 }}
        >
          <p style={{ marginTop: 0, padding: 0, fontsize: '14px', marginBottom: 0 }}>
            舆情数据来源分布
          </p>
          <EnterprisePie data={data}></EnterprisePie>
        </ProCard>
        <ProCard
          style={{
            width: '100%',
            height: '160px',
            borderRadius: '15px',
            filter: 'drop-shadow(0px 100px 80px rgba(114, 46, 209, 0.07))',
          }}
          bodyStyle={{ padding: 10 }}
        >
          <DemoPie></DemoPie>
        </ProCard>
      </ProCard>
    </ProCard>
  );
};

export default OriginHeader;
